<template>
  <el-container style="height: 100%;">
    <el-aside width="initial">
      <Menu :isCollapse="isCollapse"></Menu>
      <div v-show="!isCollapse" style="display: flex;flex-direction: column;align-items: center; padding: 50px 0px;">
        <el-image style="width: 100px; height: 100px;"
          src="https://cache.waimaiguan.com/ba8e8e7e-e532-435e-b76a-29459cea56ff.jpg"></el-image>
        <span style="font-size: small; margin-top: 15px;">联系开发者</span>
      </div>
    </el-aside>

    <el-container style="height: 100%;">
      <el-header>
        <el-row style="width: 100%; display: flex; align-items: center; color: white;">
          <el-col :span="1">
            <i :class="isCollapse?'iconfont icon-zhankai':'iconfont icon-shousuo'" style="cursor:pointer"
              @click="isCollapse = !isCollapse" size="mini"></i>
          </el-col>
          <el-col :span="19">
            <p>公告：暂无</p>
          </el-col>
          <el-col :span="4" style="display: flex;flex-direction: column; align-items: center;">
            <el-dropdown @command="handleCommand">
              <span style="color: #FFFFFF; cursor:pointer">
                <i class="iconfont icon-yonghu"></i>{{ user }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="iconfont icon-yonghu" command="personal">我的信息</el-dropdown-item>
                <el-dropdown-item icon="iconfont icon-tuichudenglu" command="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Menu from './Menu.vue'

  export default {
    name: 'Main',
    data() {
      return {
        user: '',
        isCollapse: false
      }
    },
    components: {
      Menu
    },
    created() {
      this.user = sessionStorage.getItem('user')
    },
    methods: {
      exit() {
        sessionStorage.clear()
        this.$router.replace({
          path: '/login'
        })
        location.reload()
      },
      personal() {
        this.$router.push('/main/personal')
      },
      download() {
        window.open('https://chage.club/download/voucher.zip')
      },
      handleCommand(command) {
        if (command === 'personal') {
          this.personal()
        } else if (command === 'exit') {
          this.exit()
        }
      }
    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #304156;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .el-aside {
    background-color: #304156;
    color: #fff;
  }

  .el-main {
    background-color: #f6f6f6;
    padding: 10px 10px 5px 10px;
  }

  .el-menu {
    border: 1px;
  }

  ::-webkit-scrollbar {
    display: none;
  }
</style>
